import { 
  AmbientLight,
  Color,
  Geometry,
  Line,
  LineBasicMaterial,
  LineDashedMaterial,
  PerspectiveCamera, Scene, sRGBEncoding, Vector3, WebGLRenderer 
} from "three"
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls'

const scene = new Scene()
const camera = new PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000)
camera.position.z = 90
camera.lookAt(0, 0, 0)

const material = new LineDashedMaterial({
  // 定义线条材质是否使用顶点元素，这是一个boolean值。意思是线条各部分的颜色根据顶点的颜色来进行插值。
  // 如果开启，记得关闭 color 不然会与 color 产生混合效果
  vertexColors: true,
  // 由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制，无论如何设置该值，线宽始终为1。
  linewidth: 1,
  // 定义线条的整体颜色，优先级低于 开启 vertexColors 后的自定义颜色
  color: 0xffff00,
  // 短划线的长度
  dashSize: 1,
  // 间隔的长度
  gapSize: 0.5,
  // 缩放
  // 如果 scale 小于 1 dashSize 就会增大
  // 如果 scale 大于 1 dashSize 就有缩小
  scale: 2
})
const lines = new Geometry()
lines.vertices.push(new Vector3(-10, 0, 0))
lines.vertices.push(new Vector3(0, 10, 0))
lines.vertices.push(new Vector3(10, 0, 0))

lines.colors.push(
  (new Color(0xff0000)),
  new Color(0x00ff00),
  new Color(0x0000ff),
)

const line = new Line(lines, material)
line.computeLineDistances()
line.position.set(0, 0, 0)
scene.add(line)

scene.add(new AmbientLight(0xffffff))

const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.outputEncoding = sRGBEncoding

document.body.appendChild(renderer.domElement)
const trackballControls = new TrackballControls(camera, renderer.domElement)

function render() {
  trackballControls.update()

  line.rotation.y += 0.01

  requestAnimationFrame(render)
  renderer.render(scene, camera)
}

render()